<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>JSON数据</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<table id="bor" border="1">
		<tr>
			<th>ID</th>
			<th>姓名</th>
			<th>住址</th>
			<th>手机</th>
		</tr>
	</table>


	<select id="sel">

	</select>
</body>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var userArray = [ {
			"userid" : 1,
			"username" : "admin",
			"address" : "北京市海淀区",
			"mobile" : "12312345678"
		}, {
			"userid" : 2,
			"username" : "梅西",
			"address" : "湖北省武汉市",
			"mobile" : "12315263748"
		}, {
			"userid" : 3,
			"username" : "詹姆斯",
			"address" : "四川省成都市",
			"mobile" : "12313245768"
		}, {
			"userid" : 4,
			"username" : "梅西",
			"address" : "广东省广州市",
			"mobile" : "12343218765"
		} ];
		$(userArray).each(function() {
			$("#bor").append("<tr><td>"+this.userid+"</td><td>"+this.username+"</td><td>"+this.address+"</td><td>"+this.mobile+"</td></tr>");
		});
		
		$(userArray).each(function(){
			$("#sel").append("<option>"+this.username+"-"+this.address+"-"+this.mobile+"</option>");
		});
	});
</script>
</html>
